import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:tracker/common/widget/common.dart';
import 'package:tracker/pages/home/vip_service/widget/other_record.dart';
import 'package:tracker/pages/home/vip_service/widget/security_record.dart';

import '../../../../provider/global_provider.dart';
import '../../../../theme/app_theme.dart';
import '../mixin/vip_service_mixin.dart';

class VipServicePage extends ConsumerStatefulWidget {
  final int chooseTabIndex;

  const VipServicePage({super.key,required this.chooseTabIndex});

  @override
  ConsumerState<VipServicePage> createState() => _VipServicePageState();
}

class _VipServicePageState extends ConsumerState<VipServicePage>
    with VipServicePageMixin, SingleTickerProviderStateMixin {

  @override
  void initState() {
    tabController = TabController(length: tabs.length, vsync: this, initialIndex: widget.chooseTabIndex);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('VIP服务', style: TextStyle(color: Colors.white)),
          centerTitle: true,
          backgroundColor: AppTheme.themeConfig.primaryColor,
          elevation: 0,
          leading: GestureDetector(
            onTap: () {
              Navigator.pop(context);

            },
            child: Container(
              height: kToolbarHeight,
              padding: const EdgeInsets.only(top: 8),
              alignment: Alignment.center,
              child: const Text(' <返回',
                  textAlign: TextAlign.center,
                  maxLines: 1,
                  style: TextStyle(color: Colors.white)),
            ),
          ),
        ),
        backgroundColor: Colors.grey.shade100,
        body: Column(
          children: [
            const SizedBox(height: 16),
            buildDeviceInfo(),
            const SizedBox(height: 16),
            _buildTabBar(),
            const SizedBox(height: 16),
            Expanded(
                child: Container(
              decoration: BoxDecoration(
                color: Colors.grey.shade100,
              ),
              child: TabBarView(
                  controller: tabController,
                  children: tabs.map((e) => _buildTabItem(e)).toList()),
            ))
          ],
        ));
  }

  Widget _buildTabItem(String tab) {
    int index = tabs.indexOf(tab);
    switch (index) {
      case 0:
        return const SecurityRecord();
      default:
        return OtherRecord(index: index);
    }
  }

  Widget _buildTabBar() {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16),
      padding: const EdgeInsets.all(4),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(25),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 8,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: TabBar(
        overlayColor: const MaterialStatePropertyAll(Colors.transparent),
        labelColor: Colors.white,
        labelStyle: const TextStyle(fontSize: 14, fontWeight: FontWeight.w600),
        unselectedLabelStyle: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
        unselectedLabelColor: AppTheme.themeConfig.primaryTextColor,
        indicator: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
            colors: [
              AppTheme.themeConfig.primaryColor,
              AppTheme.themeConfig.primaryColor.withOpacity(0.8),
            ],
          ),
          borderRadius: BorderRadius.circular(22),
          boxShadow: [
            BoxShadow(
              color: AppTheme.themeConfig.primaryColor.withOpacity(0.3),
              blurRadius: 8,
              offset: const Offset(0, 2),
            ),
          ],
        ),
        indicatorSize: TabBarIndicatorSize.tab,
        dividerColor: Colors.transparent,
        tabs: tabs.map((e) => Tab(text: e)).toList(),
        controller: tabController,
      ),
    );
  }

  Widget buildDeviceInfo() {
    final deviceInfo = ref.watch(deviceInfoProvider);
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16),
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            AppTheme.themeConfig.primaryColor,
            AppTheme.themeConfig.primaryColor.withOpacity(0.8),
          ],
        ),
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(
            color: AppTheme.themeConfig.primaryColor.withOpacity(0.3),
            blurRadius: 12,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: Row(
        children: [
          Container(
            decoration: BoxDecoration(
              color: Colors.white.withOpacity(0.2),
              shape: BoxShape.circle,
            ),
            padding: const EdgeInsets.all(4),
            child: const ClipOval(
              child: Image(
                image: AssetImage('assets/images/logo/xjww_logo.png'),
                width: 50,
                height: 50,
              ),
            ),
          ),
          const SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Icon(
                      Icons.phone_android,
                      color: Colors.white.withOpacity(0.9),
                      size: 16,
                    ),
                    const SizedBox(width: 6),
                    Expanded(
                      child: Text(
                        deviceInfo.deviceName ?? "",
                        style: const TextStyle(
                          color: Colors.white,
                          fontSize: 16,
                          fontWeight: FontWeight.w700,
                        ),
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 8),
                Row(
                  children: [
                    Icon(
                      Icons.qr_code,
                      color: Colors.white.withOpacity(0.9),
                      size: 16,
                    ),
                    const SizedBox(width: 6),
                    Expanded(
                      child: Text(
                        "设备号: ${deviceInfo.imei ?? ''}",
                        style: TextStyle(
                          color: Colors.white.withOpacity(0.95),
                          fontSize: 14,
                          fontWeight: FontWeight.w500,
                        ),
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}